<script lang="ts" setup>

import { onMounted, ref, onBeforeMount } from 'vue';

import { Search } from '@element-plus/icons-vue'
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },

]
const input2 = ref('')
const currentPage2 = ref(5)
const pageSize2 = ref(100)
const size = ref(10)
const background = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const active = ref('0')
const changeAct = (val: any) => {
  active.value = val
}
const testAct = ref('0')
const changeTest = (val: any) => {
  testAct.value = val
}

</script>
<template>
  <div class="container1 container flexbox ">
    <div style="flex: 1;">
      <div class="searchHeader">
        <div>
          <button @click="changeAct('0')" :class="active == '0' ? 'on' : ''">子栏目1</button>
          <button @click="changeAct('1')" :class="active == '1' ? 'on' : ''">子栏目2</button>
        </div>

        <el-input v-model="input2" class="input" placeholder="请输入名称搜索">
          <template #suffix>
            <el-icon style="color: #0C9397;">
              <Search />
            </el-icon>
          </template>
        </el-input>

      </div>
      <ul style="border-top: 1px solid #eee;">
        <li v-for="(i, n) in 6" :key="n" class="artItem">
          <img src="" alt="">
          <div class="rightcontent">
            <p>2024 大型设备校准培训顺利进行</p>
            <span>
              2024年大型设备校准业务，在郑州展开为郑州展开为期5天郑州展开为期5天郑州展开为期5天期５天的.
            </span>

            <div style="justify-content: space-between;" >
              <div>
                <el-icon style="margin-right: 8px;">
                  <View />
                </el-icon> <span>122</span>
                <el-icon style="margin: 0 8px 0 25px;">
                  <Calendar />
                </el-icon><span>2024-10-19</span>
              </div>
              <div class="lookMain">
                <router-link :to="'/article'">
                  查看详情
                </router-link>

              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2"
          :page-sizes="[10, 200, 300, 400]" :size="size" :background="true" layout="prev, pager, next,sizes,"
          :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </div>
    <div class="righttj">
      <p>热门培训推荐</p>
      <ul>
        <li v-for="i in 8">
          <span
            :style="i == 0 ? 'background:#FF3300;color:#fff' : i == 1 ? 'background:#FF3300;color:#fff' : i == 2 ? 'background:#FF9900;color:#fff' : ''">{{
            i }}</span>
          <div>
            2024大型设备校准培训顺利进行
          </div>
        </li>
      </ul>
    </div>
  </div>

</template>
<style scoped lang="scss">
.container {
  background-color: #fff;
  height: calc(100% - 40px);
  margin: 20px auto;
  padding: 20px;
}

button {
  width: 120px;
  height: 36px;
  background-color: #F5F5F5;
  font-size: 16px;
  margin-right: 11px;
  cursor: pointer;
  color: #333333;
}

.on {
  background-color: #0C9397;
  color: #fff;
}

.searchHeader {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;

  .input {
    width: 360px;
  }



  .add {
    border: 1px solid #0C9397;
    color: #0C9397;
    background-color: rgba(12, 147, 151, .1);
    margin: 0;
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.openTest {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;

  button {
    margin: 0;
    border: 1px solid #0C9397;
    color: #0C9397;
    background-color: rgba(12, 147, 151, .1);
  }

  span {
    margin-right: 12px;
    color: #666;
  }

  .teston {
    background-color: #0C9397;
    color: #fff;
  }
}

.expandData {
  background: #F5F5F5;
  margin: 10px 20px;
 
  p {
    font-size: 16px;
    color: #666666;
    margin-top: 10px;
  }
}

.artItem {
  padding: 18px 0 22px;
  border-bottom: 1px solid #EEEEEE;
  display: flex;
  font-size: 15px;
  color: #888888;
  img {
    width: 160px;
    height: 100px;
    margin-right: 16px;
  }
  div{
    display: flex;

  }
  .rightcontent{
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 0;
    flex: 1;
    p{
      color: #333333;
      font-size: 16px;
    }
    .lookMain a{
      color: #0C9397;
    }
  }
}

.flexbox {
  display: flex;
  min-height: 384px;
  height: auto;
  .righttj {
    width: 330px;
    margin-top: 52px;
    margin-left: 25px;
    border: 1px solid #EBEBEB;

    p {
      background-color: #F5F5F5;
      color: #666666;
      height: 42px;
      line-height: 42px;
      padding-left: 16px;
    }

    ul {
      padding: 15px 16px;
    }

    li {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      font-size: 16px;
      color: #666666;

      span {
        display: block;
        margin-right: 10px;
        width: 23px;
        height: 23px;
        background: #F5F5F5;

        text-align: center;
        line-height: 23px;
      }
    }
  }

}
</style>